<template>
	<view
		v-if="show"
        class="gy-model gy-mask"
        :class="'gy-mask-' + animation"
        @click.stop="">
        <view class="gy-model-box" :class="'gy-model-box-' + animation" @click.stop="">
            <view class="gy-model-title">{{ props.title }}</view>
			<view class="gy-model-content">
				<com-parse :content="content" />
			</view>
			<slot v-if="content">
				<view class="gy-model-action">
					<com-button mode="" type="secondary" @click.stop="closeFn">不同意</com-button>
					<com-button mode="" :disabled="countdown !== 0" @click.stop="submitFn">
						同意<text v-if="countdown">（{{ countdown }}S）</text>
					</com-button>
				</view>
			</slot>
        </view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
		onMounted
    } from "vue";

	import { getHospitalConfigRichText } from "@/request/apis/hospital.js";

	const emits = defineEmits(["submit", "close"]);

    const props = defineProps({
    	title: {
    		type: String,
    		default: "服务协议"
    	},
    	type: {
    		type: String
    	}
    });

	const show = ref(false);

    const animation = ref("show");

	const timer = ref(null);
	const countdown = ref(3);

	const content = ref("");

    function closeFn() {
    	animation.value = "hide";
    	setTimeout(() => {
    		emits("close");
    	}, 200);
    }

    function submitFn() {
    	emits('submit');
		closeFn();
    }

	onMounted(() => {
		if(timer.value){
			clearInterval(timer.value);
			timer.value = null;
		}
		countdown.value = 3;
		getHospitalConfigRichText({
			paramsKey: props.type
		}).then((res : any) => {
			content.value = res;
			timer.value = setInterval(() => {
				if (countdown.value !== 0) {
					countdown.value -= 1
				}else{
					clearInterval(timer.value);
					timer.value = null;
				}
			}, 1000)
		}).catch(() => {
			content.value = "";
		}).finally(() => {
			show.value = true;
		})
	});

	defineExpose({
	    closeFn: closeFn
	});

</script>

<style lang="scss" scoped>
	.gy-model {
	    @include flex-center-center;
	    .gy-model-box{
	        width: 85%;
	        min-height: 100rpx;
	        background: linear-gradient(180deg, #EAF7EB 0%, #FEFEFE 38%, #FFFFFF 100%);
	        border-radius: 40rpx;
	        overflow: hidden;
			padding: 50rpx var(--gy-gap);
			.gy-model-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #2E344A;
				line-height: 56rpx;
				text-align: center;
				margin-bottom: 28rpx;
			}
			.gy-model-content{
				min-height: 200rpx;
				max-height: 50vh;
				overflow: auto;
			}
			.gy-model-action{
				@include grid(2);
				padding-top: var(--gy-gap);
			}
	    }
	    .gy-model-box.gy-model-box-show{
	        animation: gy-model-box-show .3s;
	        animation-fill-mode: forwards;
	    }
	    .gy-model-box.gy-model-box-hide{
	        animation: gy-model-box-hide .3s;
	        animation-fill-mode: forwards;
	    }
	    @keyframes gy-model-box-show {
	        from {
	            opacity: 0;
	            transform: scale(0.5);
	        }
	        to {
	            opacity: 1;
	            transform: scale(1);
	        }
	    }
	    @keyframes gy-model-box-hide {
	        from {
	            opacity: 1;
	            transform: scale(1);
	        }
	        to {
	            opacity: 0;
	            transform: scale(0.5);
	        }
	    }
	    .gy-popup-panel {
	        background-color: #FFFFFF;
	        width: 100%;
	        position: absolute;
	        border-top-left-radius: 50rpx;
	        border-top-right-radius: 50rpx;
	        .gy-popup-head{
	            height: 100rpx;
	            @include flex-between-center;
	            padding: 0 var(--gy-gap);
	            .gy-popup-title{
	                width: calc(100% - 90rpx);
	                font-weight: bold;
	                font-size: var(--gy-font-size-large);
	                color: var(--gy-text-color-primary);
	                padding-left: 80rpx;
	                text-align: center;
	                @include text-ellipsis(1);
	            }
	            .gy-popup-close{
	                width: 80rpx;
	                height: 80rpx;
	                @include flex-center-center;
	                font-size: var(--gy-font-size-base);
	                color: var(--gy-text-color-secondary);
	            }
	        }
	        .gy-popup-content{
	            width: 100%;
	            min-height: 100rpx;
	            max-height: 45vh;
	            overflow: auto;
	        }
	        .gy-popup-action{
	            width: 100%;
	            background-color: #fff;
	            padding: var(--gy-gap) var(--gy-gap) 90rpx var(--gy-gap);
	            .confirm{
	                height: 100rpx;
	                @include flex-center-center;
	                border-radius: 50rpx;
	                color: #ffffff;
	                font-size: var(--gy-font-size-medium);
	                font-weight: 700;
	                padding: 0 var(--gy-gap);
	                background: linear-gradient(315deg, #07BF66 0%, #81AFFF 100%);
	                box-shadow: 0px 3rpx 6rpx #D6E2F8;
	            }
	        }
	    }

	    .gy-popup-panel.gy-popup-panel-show{
	        animation: gy-popup-panel-show .5s;
	        animation-fill-mode: forwards;
	    }
	    .gy-popup-panel.gy-popup-panel-hide{
	        animation: gy-popup-panel-hide .5s;
	        animation-fill-mode: forwards;
	    }

	    @keyframes gy-popup-panel-show {
	        from {
	            bottom: -100%;
	        }

	        to {
	            bottom: 0;
	        }
	    }

	    @keyframes gy-popup-panel-hide {
	        from {
	            bottom: 0;
	        }

	        to {
	            bottom: -100%;
	        }
	    }

	}

</style>
